<template>
  <div>
    <div class="comhall">
        <div class="swiper-container hall-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in list" :key="item.id">
                    <div class="text" v-show="!flag[index]">
                        <p>{{item.text}}</p>
                    </div>
                    <div class="play" v-show="!flag[index]">
                        <img src="https://s1.ax1x.com/2022/08/10/v1vk5Q.png" />
                    </div>
                    <video :src="item.url" @click="handleClick($event,index)" :ref="item.id"></video>
                </div>
            </div>
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
            <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
        </div>
    </div>
  </div>
</template>

<script>
export default {
    // watch:{
    //     flag(val,val2){
    //         console.log(val,val2,12312312312313212313)
    //     }
    // },
    data () {
        return {
            list:[
                {
                    id:1,
                    url:require('@/assets/video/123.mp4'),
                    text:'视频1的描述文字'
                },
                {
                    id:2,
                    url:require('@/assets/video/321.mp4'),
                    text:'视频2的描述文字'
                },
                {
                    id:3,
                    url:require('@/assets/video/123.mp4'),
                    text:'视频3的描述文字'
                }
            ],
            flag:[false,false,false]
        }
    },
    methods:{
        handleClick(e,i){
            // console.log(this.flag)
            // console.log(id)
            this.$set(this.flag,i,true)
            // console.log(this.flag)
            let myVideo = e.currentTarget
            // console.log(myVideo)
            // console.log(myVideo.paused)
            if(myVideo.paused === true){
                myVideo.play()
                // this.$(myVideo).siblings().hide()
            }else{
                myVideo.pause()
                this.$set(this.flag,i,false)
                // console.log(this.flag)
                // this.$(myVideo).siblings().show()
            }
            // console.log(this.flag)
        }
    },
    mounted () {
        // console.log(this.$refs)
    window.scrollTo(0,0);
    // 实例banner轮播
    var that = this
    // console.log(that)
    this.hallSwiper = new this.$swiper(".hall-swiper", {
        mousewheel: true,
        // loop: true, // 循环模式选项
        // speed: 1000,
        // observer:true,//修改swiper自己或子元素时，自动初始化swiper
        // observeParents:true,//修改swiper的父元素时，自动初始化swiper
    //   autoplay: {
    //     delay: 3500,
    //     disableOnInteraction: false,
    //   },
        // 如果需要前进后退按钮
        navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
        // clickable: true
        },
        pagination: {
            el: '.swiper-pagination',
            clickable :true,
        },
        on:{
        destroy: function(){
            // alert('你销毁了Swiper;');
        },
        slideChangeTransitionStart: function(){
            // alert(123);
            // console.log(that.$refs.video0.paused)
            // that.$refs.video0.pause()
            // that.$refs.video1.pause()
            // that.$refs.video2.pause()
            // console.log( that.$('video').trigger('pause'))
            for(let i in that.$refs){
                that.$refs[i][0].pause()
                // that.flag[i] = false
                that.$set(that.flag,i-1,false)
            }
            // console.log(that.flag)
            // that.$('.swiper-slide div').show()
            // that.$('video').trigger('pause'); //关闭所有的视频播放
           // that.$('video').trigger('play'); //打开所有的视频播放
        },
        },
    });
    },
}
</script>

<style lang='scss' scoped>
.comhall {
    width: 80%;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
    // margin-top: 30px;
      .hall-swiper {
        
        position: relative;
        height: 100%;
        width: 100%;
        img {
          height: 100%;
          width: 100%;
          transition: all linear 0.3s;
        //   cursor: pointer;
        }
      }
    }
    .swiper-button-prev {
          width: 60px;
          position: absolute;
          bottom: 0%;
        //   left: 100%;
          background-color: #fff !important;
          border-right:1px solid #c3c3c4;
          background: url(http://www.fordcasa.com/bocstatic/web/img/swiper-l.png) no-repeat center center; 
          background-size: 15px 23px;
        }
        .swiper-button-next {
          width: 60px;
          position: absolute;
          bottom: 0%;
        //   left: 100%;
          background-color: #fff !important;
          // transform: translate(-60px, 228px);
          background: url(http://www.fordcasa.com/bocstatic/web/img/swiper-r.png) no-repeat center center;
          background-size: 15px 23px;
        }
        video{
            width:100%;
        }
        .play{
            position:absolute;
            top: 50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .text{
            position:absolute;
            left:50%;
            top:5%;
            transform: translate(-50%,-5%);
            p{
                color:#ffffff;
                font-size:30px;

            }
        }
        :deep(.swiper-pagination-bullet){
            width:20px;
            height:20px;
            background-color: #ffffff;
        }
</style>